<!DOCTYPE html>
<html lang="ch-zn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="./node_modules/bootstrap-icons/font/bootstrap-icons.css">
    <script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
    <title>用户信息</title>
</head>

<body>

    <div class="container">
        <div class="include" file="headbar.html"></div>
        <br/><br/>
        <div class="row">
            <div class="input-group mb-3">
                <span class="input-group-text" id="basic-addon1">用户账号</span>
                <input type="text" class="form-control" placeholder="用户账号" aria-label="用户账号" aria-describedby="basic-addon1" id="input_id">
                <span class="input-group-text text-bg-secondary">OR</span>
                <span class="input-group-text" id="basic-addon2">用户姓名</span>
                <input type="text" class="form-control" placeholder="用户姓名" aria-label="用户姓名" aria-describedby="basic-addon2" id="input_name">
            </div>
        </div>
        <br/>
        <div class="row">
            <div class="d-grid gap-2 col-4 mx-auto">
                <button class="btn btn-primary" type="button" onclick="query_userinfor()">个人信息查询</button>
            </div>
            <div class="d-grid gap-2 col-4 mx-auto">
                <button class="btn btn-primary" type="button" onclick="query_usersub()">订单信息查询</button>
            </div>
        </div>
        <br/>
        <div class="row" id="output"></div>
    </div>
</body>
<script type="text/javascript" src="./node_modules/jquery/dist/jquery.js" charset="UTF-8"></script>
<script>
    $(".include").each(function() {
        if (!!$(this).attr("file")) {
            var $includeObj = $(this);
            $(this).load($(this).attr("file"), function(html) {
                $includeObj.after(html).remove(); //加载的文件内容写入到当前标签后面并移除当前标签
            })
        }
    });
    url0 = "http://localhost:80/index.php/Mysql/";

    function query_userinfor() {
        var input_id = document.getElementById('input_id').value;
        var input_name = document.getElementById('input_name').value;
        if (input_id == "" && input_name == "") {
            alert("账号和姓名不得全为空！");
            return;
        }
        var inputdata = {
            "input_id": input_id,
            "input_name": input_name,
        }
        $.ajax({
            methods: "GET",
            url: url0 + "get_userdata/",
            async: pageYOffset,
            contentType: "application/x-www-form-urlencoded",
            data: inputdata,
            dataType: "json",
            success: function(data) {
                if (data == "Null user") {
                    alert("未查询到此用户！");
                    return;
                }
                //转成数组
                console.log(data);
                data_np = Object.values(data);
                console.log(data_np.length);
                console.log(typeof(data_np.length));

                //找到要输出的位置
                var output = document.getElementById('output');
                //初始化输出文本
                var value_np_out = "";
                value_np_out += "<table class='table'>" + "<thead>" + "<tr>" + "<th scope='col'>账号</th><th scope='col'>姓名</th><th scope='col'>电话号</th><th scope='col'>地址</th><th scope='col'>邮政编号</th>" + "</tr>" + "</thead>" + "<tbody > "
                value_np_out += "<tr>"
                for (i1 = 0; i1 < data_np.length; i1++) {
                    console.log(data_np);
                    value_np_out += "<td>" + data_np[i1] + "</td>";

                }
                value_np_out += "</tr>"
                console.log(value_np_out);
                value_np_out += "</tbody><table>"
                output.innerHTML = value_np_out;
            },
            error: function(err) {
                // 请求失败， err是失败的内容
                print("请求失败");
            },
            complete: function(e) {
                // 不管成功还是失败都会调用这个函数
            }
        })
    }

    function query_usersub() {
        var input_id = document.getElementById('input_id').value;
        var input_name = document.getElementById('input_name').value;
        if (input_id == "" && input_name == "") {
            alert("账号和姓名不得全为空！");
            return;
        }
        var inputdata = {
            "input_id": input_id,
            "input_name": input_name,
        }
        $.ajax({
            methods: "GET",
            url: url0 + "get_usersub/",
            async: pageYOffset,
            contentType: "application/x-www-form-urlencoded",
            data: inputdata,
            dataType: "json",
            success: function(data) {
                if (data == "Null user") {
                    alert("未查询到此用户！");
                    return;
                }
                //转成数组
                data_np = Object.values(data);
                console.log(data_np.length);
                console.log(typeof(data_np.length));
                //找到要输出的位置
                var output = document.getElementById('output');
                //初始化输出文本
                var value_np_out = "";
                value_np_out += "<table class='table'>" + "<thead>" + "<tr>" + "<th scope='col'>账号</th><th scope='col'>订阅报纸编号</th><th scope='col'>订阅数量</th><th scope='col'>报纸单价</th><th scope='col'>总价</th><th scope='col'>日期</th>" + "</tr>" + "</thead>" + "<tbody > "
                for (i1 = 0; i1 < data_np.length; i1++) {
                    var value_np = Object.values(data_np[i1])
                    console.log(value_np);
                    value_np_out += "<tr>"
                    for (i2 = 0; i2 < value_np.length; i2++) {
                        value_np_out += "<td>" + value_np[i2] + "</td>";
                    }
                    value_np_out += "</tr>"
                    console.log(value_np_out);
                }
                value_np_out += "</tbody><table>"
                output.innerHTML = value_np_out;
            },
            error: function(err) {
                // 请求失败， err是失败的内容
                print("请求失败");
            },
            complete: function(e) {
                // 不管成功还是失败都会调用这个函数
            }
        })
    }
</script>

</html>